<template>
  <view class="my-category">
    <view class="content">
      <scroll-view
        scroll-y
        class="slider"
        :style="'height: calc(100vh - ' + height + 'rpx)'"
        :scroll-top="scrollTop"
        scroll-with-animation
      >
        <view
          :class="['item', index == current ? 'active' : '']"
          v-for="(item, index) in list"
          :key="index"
          @click="handleSwitchCategory(index)"
          >{{ item.name }}</view
        >
      </scroll-view>
      <view class="main">
        <scroll-view
          class="list"
          scroll-y
          :style="'height: calc(100vh - ' + height + 'rpx)'"
          @scrolltolower="onScrolltolower"
        >
          <view class="category-bar" @click="toCategoryDetail">
            <u-icon
              name="arrow-right"
              label-pos="left"
              :label="list[current]?.name"
            ></u-icon>
          </view>
          <slot></slot>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const emits = defineEmits(["scrolltolower", "change", "detail"]);

const props = defineProps({
  height: {
    type: Number,
    default: 184,
  },
  list: {
    type: Array,
    default: () => [],
  },
});

const alignHeight = uni.getSystemInfoSync().windowHeight - props.height;

const scrollTop = ref(0);

const current = defineModel({
  type: Number,
});

function handleSwitchCategory(e) {
  scrollTop.value = (e + 1) * 35 - alignHeight / 2;
  current.value = e;
  emits("change", e);
}

function onScrolltolower() {
  emits("scrolltolower");
}

function toCategoryDetail() {
  const cate = props.list[current.value];
  uni.$u.route({
    url: "/pages/goods/list",
    params: {
      type: "categorize",
      categorizeId: cate.id,
      categorizeName: cate.name,
    },
  });
  emits("detail", cate);
}
</script>

<style lang="scss" scoped>
.my-category {
  background-color: #ffffff;

  .content {
    display: flex;
    height: 100%;

    .slider {
      width: 100px;
      background-color: #eeeeee;
      overflow-y: scroll;

      .item {
        text-align: center;
        padding: 20rpx;
        position: relative;

        &.active {
          background-color: #fff;
          color: #6dbc50;

          &::before {
            content: "";
            display: block;
            width: 2px;
            height: 100%;
            background-color: #6dbc50;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }

    .main {
      flex: 1;
      // overflow-y: auto;
      // padding: 20rpx;
      box-sizing: border-box;

      .category-bar {
        padding: 20rpx 0;
        color: #222222;
        background-color: #a2fbc1;
        display: flex;
        justify-content: center;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
      }

      .list {
        overflow-y: scroll;
        padding: 20rpx 10rpx;
        box-sizing: border-box;
        background-color: #fff;
      }
    }
  }
}
</style>
